<template>
    <div>
        <!-- <myh1 :qqq="name" @myfn='fn' :w=1 :s=2></myh1>
        <myh1 ref='myh1'></myh1>
        <i ref='myi'>打雷下雨</i>
        <btn>
          我自己的按钮<i>66666</i> 
          <strong slot='til'>用户的title</strong>
          <strong slot='til'>666</strong>

          <template v-slot:til>
            <strong>用户的title</strong>
            <strong>666</strong>
          </template>
          <template #til>
            <strong>用户的title</strong>
            <strong>666</strong>
          </template>
        </btn> -->
        <!-- <myul :list='ary'>
          <h1 slot-scope="aaa" slot='default'>
            {{aaa.qqq}}{{aaa}}
          </h1>
          <template #default="aaa">
            <h1 >
              {{aaa.qqq}}
            </h1>
          </template>
          
        </myul> -->
        <h1>{{name}}</h1>
        <myInput v-model='name' ></myInput>
        <!-- <myInput :value='name' @input="val=>this.name=val" ></myInput> -->
        <h level=1>要渲染成h1标签</h>
        <h level=2>要渲染成h2标签</h>
    </div>
</template>
<script>
// @ is an alias to /src
import myh1 from './myh1'
import btn from './button'
import myul from './ul'
import myInput from './input'
import h from './h'
/* 
  父传子  自定义属性 + props
  子传父  自定义事件 + $emit

  $parent 获取当前组件的父组件对应的实例，那么实例上的任意属性我们都可以获取到
  $children 获取所有的子组件，根据索引可以找到对应的子组件


  ref 这个行内属性可以用来获取DOM元素 或者 组件的
  <组件或者元素 ref='自定义的名字'>
  获取 通过 ：this.$refs.自定义的名字 
     只能获取当前组件的元素或组件

  $attrs 获取的是没有被 props接收的哪些属性
  $listeners   获取的就是传递的哪些自定义事件 

  provide/inject

  <slot>默认值</slot> vue的内置组件  代表的内容 就是 当前使用这个组件时， 里边包含的内容

  v-slot:插槽名 新写法 等同于 <标签 slot='插槽名'>；但是只能用在 template;简写 #

  slot-scope='用户自己起的名字' 这个名字对应的值 是：子组件中的 <slot :子组件自定义属性='xxx'></slot> 
                                                  在slot上的所有行内属性 组成的对象；
  v-slot:default='用户自己起的名字'     
  
  组件上使用 v-model
  v-model  可以拆成  :value  @input
  v-model='name' :value='name' @input="val=>this.name=val"

*/
export default {
    name: 'App',
    data() {
        return {
          name:"追风666",
          ary:[1,2,3,4,5,6,7]
        }
    },
    mounted() {
      // setTimeout(()=>{
      //   console.log(this.$refs)
      //   this.$children[1].name = "更改的儿子"
      // },2000)
    },
    methods: {
      fn(val){
        this.name = val;
      }
    },
    components: {
        myh1:myh1,
        btn,myul,
        myInput,h
    }
}
</script>
<style lang="less">

</style>